<template>
  <div class="content">
    <md-preview
      :editor-id="props.editorId"
      theme="github"
      :model-value="props.modelValue"
      preview-theme="default"
      language="zh-CN"
      :show-code-row-number="props.showCodeRowNumber"
      code-theme="atom"
      @on-html-changed="onHtmlChanged"
      @on-get-catalog="onGetCatalog"
    />
  </div>
</template>

<script lang="ts">
  export default { name: 'IzPreviewContent' }
</script>

<script setup lang="ts">
  import type { PropType } from 'vue'
  import { useStore } from 'vuex'
  import { MdPreview } from 'md-editor-v3'
  import { debounce } from '@vavt/util'
  // import type { StateType } from '@/store';
  // const store = useStore<StateType>();

  const props = defineProps({
    editorId: {
      type: String as PropType<string>,
      default: '',
    },
    modelValue: {
      type: String as PropType<string>,
      default: '',
    },
    showCodeRowNumber: {
      type: Boolean as PropType<boolean>,
      default: true,
    },
  })

  const onHtmlChanged = debounce(() => {
    const { hash } = location

    if (/^#/.test(hash)) {
      const headingId = decodeURIComponent(hash.replace('#', ''))

      if (headingId) {
        const targetHeadDom = document.getElementById(headingId)

        if (targetHeadDom) {
          const scrollLength = (targetHeadDom as HTMLHeadElement).offsetTop + 414 - 10

          window.scrollTo({
            top: scrollLength,
            behavior: 'smooth',
          })
        }
      }
    }
  })

  const onGetCatalog = (catalogs: string[]) => {
    console.log('catalogs', catalogs)
  }
</script>
